<template>
  <div class="div-container">
    <el-row :gutter="10" style="height:27.3%;">
      <el-col :span="16" style="height: 100%;">
        <!-- 台账管理 -->
        <account-component></account-component>
      </el-col>
      <el-col :span="8" style="height: 100%;">
        <!-- 天气 -->
        <weather-component></weather-component>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="height:37.3%;">
      <el-col :span="16" style="height: 100%;">
        <!-- 库房管理 -->
        <storehouse-component></storehouse-component>
      </el-col>
      <el-col :span="8" style="height: 100%;">
        <!--设备出入库  -->
        <equipment-component></equipment-component>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="height:33.3%;">
      <el-col :span="16" style="height: 100%;">
        <!-- 工单信息 -->
        <workorder-component></workorder-component>
      </el-col>
      <el-col :span="8" style="height: 100%;">
        <!--缺陷隐患信息 -->
        <defect-component></defect-component>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: "firstPage",
  components: {
    "account-component": () => import("./components/accountComponent.vue"),
    'weather-component': () => import("./components/weatherComponent.vue"),
    'storehouse-component': () => import("./components/storehouseComponent.vue"),
    'equipment-component': () => import("./components/equipmentComponent.vue"),
    'workorder-component': () => import("./components/workorderComponent.vue"),
    'defect-component': () => import("./components/defectComponent.vue")
  }
}
</script>

<style scoped>
.div-container {
  width: 100%;
  height: 100%;
}

.el-row {
  margin-bottom: 10px;
}
</style>
